<?php include 'header.php'; ?>
<h1>Hotel Locations</h1>

<script type='text/template' id='loctemplate'>
    {{#each objects}}
    <div class="well">
    <h1>{{hotel_name}} - <img src="img/star_{{star_rating_id}}.png"></h1>
    <table cellpadding="10"><tr><td>
        <img align="left" src="img/hotel_{{hotel_id}}.jpg"></td><td valign="top"><table cellpadding="5"><tr><td valign="top" align="right"><b>Address</b></td><td><p>{{street_address}}<br>{{city}}, {{state}} {{zip}}</p></td></tr>
        <tr><td align="right"><b>Hotel Type</b></td><td>{{star_rating_description}}</td></tr>
        <tr><td align="right"><b>Currency Type</b></td><td>{{country_currency}}</td></tr>
         </table>
        </td></tr>
        <tr><td><p><a href="{{hotel_URL}}" class="btn btn-primary btn-large">Visit Hotel Web Site &raquo;</a></p></td><td>
        </td></tr>
        </table>
    </div>
    {{/each}}
</script>

<script type="text/javascript">
    function loadLocations() {
        $("#content").html("Loading ...");

        var xmlhttp;
        var txt, x, i;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = JSON.parse(xmlhttp.responseText);
                data.pop();
                var source = $("#loctemplate").html();
                var template = Handlebars.compile(source);
                $("#content").html(template({objects: data}));
                
                if (data.length == 0)
                    $("#content").html("No hotels matching selected criteria");
            }
        }//xmlhttp.onreadystatechange
        xmlhttp.open("GET", "db/HotelListingSearch.php?stars="+$("#stars").val()+"&state="+$("#state").val()+"&country="+$("#country").val(), true);
        xmlhttp.send();
    } //end function loadLocations()
</script>

<div class="well">Filter by: <select onChange="loadLocations()" id="stars">
        <option value="">Number of Stars</option> 
        <option value="1">1 Star</option>
        <option value="2">2 Stars</option>
        <option value="3">3 Stars</option>
        <option value="4">4 Stars</option>
        <option value="5">5 Stars</option>
    </select>
<select onChange="loadLocations()" id="state">
        <option value="">State</option> 
        <option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
    </select>
<select onChange="loadLocations()" id="country">
        <option value="">Country</option> 
        <option value="100">United States</option>
        <option value="101">Canada</option>
        <option value="102">Mexico</option>
        <option value="103">England</option>
    </select>

</div>
    <div id="content">
</div>

<script>
    $(document).ready(function() {
        $(function() {
            loadLocations();
        });
    });
</script>
<?php include 'footer.php'; ?>